<!DOCTYPE html>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
{% load staticfiles %}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>记述宝</title>
<link rel="stylesheet" href="">
<style type="text/css">
div, body{
    margin:0;
    padding:0;
}

<!-- {% static 'img/blank.jpg' %} -->

.dv-item-outer {
    height:50px;/*background-color:yellow;*/margin-top:15px;
}

.search-div {
    background-color:rgb(227,228,227);border-bottom: 2px solid rgb(203,204,203); border-image: none; top: 0px; 
    width:100%;
}

.search-div input {
    width:90%;height:35px;border-radius:20px;border:1px solid rgb(195,195,195);font-size:18px;padding-left:10px;
}

/* 搜索框的边框颜色 */
.search-div-border {

}

/* checking: */
.checking .note-item-checkbox {
    display:block;
    width:40px;
}

.notchecking .note-item-checkbox {
    display:none;
    width:5px;
}

.notchecking .note-item-image {
    margin-right:60px;
}

.checking .note-item-image {
    margin-right:15px;
}





.underdiv {
    margin: 0px; border-radius: 5px; border: 2px solid rgb(195, 195, 195); border-image: none; width: 100%; height: 25px;
    position:fixed;
    bottom:0;
}

.height60 {
    height:30px;
}

.heightpic {
    height:200px;
}

/* 里面的一个一个的按键 */

/* 样式：一个记述条目 */
.item .note-item-checkbox,.item .note-item-image,.item .itemitem{
    margin-top:25px;
} 


.showcheck .jsbcheckbox {
    display:block;
}

.showcheck .jsbtypeimg{
    margin-right:10px;
}

.notshowcheck .jsbcheckbox {
    display:none;
}

.notshowcheck .jsbtypeimg{
    margin-right:30px;
}


.itemyellow {
    height:20px;
}

.itemtexttype {
    font-family:'黑体';font-size:15px;color:rgb(92, 92, 92);overflow-x:scroll;font-weight:50;padding-left:10px;height:30px;border:0px solid white;background-color:transparent;
}
</style>
{% comment %}
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap-theme.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.css' %}" />
{% endcomment %}

<link rel="stylesheet" type="text/css" href="{% static 'styles/radius.css' %}" />

<script type="text/javascript" src="{% static 'scripts/jquery.min.js' %}" ></script>
{% comment %}
<script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.js' %}" ></script>
<script type="text/javascript" src="{% static 'bootstrap/js/npm.js' %}" ></script>
{% endcomment %}
<script type="text/javascript" >

function turntolog(){
    window.location.href = "/homeapp/log/index"; 
}

function canceldialog() {
    $("#newnotediv").css("display", "none");
}
// onload = function(){
//	document.body.style.backgroundColor = "rgb(227,228,227)";
// };
$(function(){
        //    document.body.style.backgroundColor = "blue";
        document.body.style.background = "url('{% static 'img/tlog_add_back.jpg' %}')";
/*
        $(".itemyellow").click(function(){
            trid = $(this).attr("id");
            //  alert($(this).attr("id"));
            $("#newnotediv").css("display", "block");
            $("#yellowtrgid").val(trid);
            });
            */



        // 注册 筛选框的click
        $(".jsbcheckbox").click(function(){

            //alert($(this).prev().attr("value"));

            // 如果它是正被选择的状态
            if ($(this).attr("checking")){
            $(this).removeAttr("checking");
            $(this).css("background-image", "url('{% static 'img/blank.jpg' %}')");
            $(this).prev().attr("value", "");


            } else {
            $(this).attr("checking", "1");    
            //alert("checking");


            // 添加背景图片，显示勾
            $(this).css("background-image", "url('{% static 'img/check.jpg' %}')");
            $(this).css("background-position", "center");
            $(this).css("background-size", "20px 20px");
            $(this).prev().attr("value", $(this).prev().attr("mayvalue"));



            //ckground-position: center;
            //background-repeat: no-repeat;
            //background-attachment: fixed;

            }

            // alert($(this).css("background-color"));


            // 修改自己的图标
            // $(this).css("background-color", "black");


            //alert("show again");




        });




});

function ajaxsub(yellowguid){

    // 应该是点的是哪个黄条，就在哪个黄条后面添加

    //    alert("你点的是这个后面的黄色" + $("#yellowtrgid").val());

    // 判断是否输入了标题
    var titleinput = $("#newnotecontent").val();
    // al1ert(titleinput + "is value");
    if (titleinput.toString().trim().length == 0) {
        alert("未输入新记述内容！");
        return false;
    }









    //al1ert("begin ajax");
    $.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token  }}' },
});

$.ajax({
type:'POST',
url:'/homeapp/note/ajax_addnote/',
dataType:'json',
async:false,
data:{
csrfmiddlewaretoken: '{{ csrf_token  }}',
name : 'n1' ,
pwd: 'n2',
title: titleinput,
},
success:function(data)
{
},
error:function(data)
{
alert("err");
},
complete:function(data){
             var jsdataon = $.parseJSON(data.responseText);
/* jsdataon = $.parseJSON(data.responseText);
   al1ert(jsdataon.name); */

            // 创建文本类型外面的div
            // var testjqdom = $("<div></div>", {
            //         "class","hello"
            //         });


             // 最里面的input
             var in1input = $("<input></input>").attr({
                        "class":"itemtexttype",
                        "type":"text",
                        "readonly":"readonly",
                        "style":"",
                        "value":jsdataon.Text,
                     });

             // 最里面的input外面的div
             var in1div = $("<div></div>").attr({
                        "class":"tfttfttff height60",
                     });

             // 那个hidden input
             var hiddeninput = $("<input></input>").attr({
                        "type":"hidden",
                        "name":"guids",
                        "value":jsdataon.guid,
                     });

             // 最外面的div
             var outterdiv = $("<div></div>").attr({
                        "class":"dv-item-outer showcheck",
                     });



            $(outterdiv).append(hiddeninput);
            $(outterdiv).append(in1div);
            $(in1div).append(in1input);
            // $(outterdiv).append(yellowitem);


             // 黄条
             var yellowitem = $("<div></div>").attr({
                        "id":jsdataon.guid,
                        "class":"itemyellow",
                     });





            // <div class="itemyellow" id="b195710e-f8ca-11e5-ac22-000c29a84f46"></div>
            // $(outterdiv).after($(yellowitem));
            // outterdiv.after("<div class='itemyellow' ></div>");

             // alert(jsdataon.name);
             // alert(jsdataon.guid);
             // alert(jsdataon.Account_Guid);
             // alert(jsdataon.NoteDateTime)
             // alert(jsdataon.Path)
             // alert(jsdataon.Text)
             // alert(jsdataon.NoteType_Guid)

             // $("#" + $("#yellowtrgid").val()).after("<div>gan!!!</div>");
             $("#" + $("#yellowtrgid").val()).after(yellowitem);
             $("#" + $("#yellowtrgid").val()).after(outterdiv);

             // 关闭newnotediv
             $("#newnotediv").css("display", "none");

             // 清空文本 因为已经成功添加了
             // newnotecontent
             $("#newnotecontent").val("");

             // 重新注册
             $(".itemyellow").click(function(){
                trid = $(this).attr("id");
                //  alert($(this).attr("id"));
                $("#newnotediv").css("display", "block");
                $("#yellowtrgid").val(trid);
             });

         }
});
//alert("end ajax");
}

// 提交复选框过的记述条目
function submititems(){
    $("#mainform").submit();
}

// obsolete
function showorhidecheck(ele){
    if ($("#imgbutton").attr("class") == "notchecked" ){
        // set to checked
        $("#imgbutton").attr("class", "checked");
        //		$("div.notshowcheck").removeClass("notshowcheck").addClass("showcheck");
        $("div[class='dv-item-outer notshowcheck']").attr("class", "dv-item-outer showcheck");
    }
    else {
        $("#imgbutton").attr("class", "notchecked");
        $("div[class='dv-item-outer showcheck']").attr("class", "dv-item-outer notshowcheck");
        //		$("div.notshowcheck").removeClass("showcheck").addClass("notshowcheck");
        //$("div.showcheck").attr("class", "notshowcheck");
    }

}

function tocommit(){
    if (!confirm("确认提交?")){
        return false;
    }
    $("#formmain").submit();
}


</script>

</head>
<!---
<div style="">

</div>
-->
<!-- 这个就是上面的固定的搜索框 -->
<body>
<div id="newnotediv" style="display:none;z-index:99999;position:fixed;top:0px;left:0px;width:100%;height:100%;">
    <div style="margin:20% auto;background-color:rgb(164,156,151);width:80%;height:35%;border-radius:10px;">
        <div style="height:20px;">
        </div>
        <div style="margin:20px auto;">
            <input id="newnotecontent" style="padding-left:2%;border-radius:10px;margin-left:20%;width:60%;height:40px;" type="text" value="" placeholder="请输入新记述"/>
        </div>
        <div style="height:20%;">
        </div>
        <div style="height:40%;">
            <input type="hidden" id="yellowtrgid" value="" / >
            <input onclick="ajaxsub();" style="background-color:rgb(107, 96, 90);border-radius:5px;float:left;margin-left:5%;width:40%;height:40%;" type="button" value="提交">
            <input  onclick="canceldialog();" style="background-color:white;border-radius:5px;float:right;margin-right:5%;width:40%;height:40%;" type="button" value="放弃">
        </div>
    </div>
</div>
<form action="/homeapp/log/add_post/" method="post" enctype="multipart/form-data" id="formmain">
    {% csrf_token %}
    <div class="search-div" style="position: fixed;">
        <input  readonly="readonly" id="logtitle"  name="logtitle" type="text" style="font-size:18px;margin:5px;margin-left:15px;" placeholder="请输入标题" value="{{ viewmodel.mytitle }}"/>
    </div>

    <!--补充空档-->
    <div style="height:47px;background-color:red;">
    </div>

    <!-- 第一个，与项无关 -->
    <div id="preitem" class="itemyellow" ></div>


    <!-- 先遍历显示它们的标题 -->
    {% for item in viewmodel.items  %}
    {% if item.TypeName == "typeA"  %}
    <!-- 文本类型-->
    <div class="dv-item-outer showcheck" >
        <input type="hidden" name="guids" value="{{ item.mguid }}" />
        <div class="tfttfttff height60" >
            <input class="itemtexttype" type="text" readonly="readonly" style="" value="{{ item.Text }}"/>
        </div>
    </div>

    {% elif item.TypeName == "typeB"  %}
    <!-- 音频类型-->
    <div class="dv-item-outer showcheck">

        <!-- guid hidden -->
        <input type="hidden" name="guids" value="{{ item.mguid }}" />



        <!-- 记述内容条目 -->
        <div class="tfttfttff height60" >
            <div style="height:30px;"></div>
        </div>
    </div>
    {% else %}
    <!-- 视频类型 -->
    <div class="dv-item-outer showcheck" style="">

        <!-- guid hidden -->
        <input type="hidden" name="guids" value="{{ item.mguid }}" />



        <!-- 记述内容条目 -->
        <div class="tfttfttff heightpic" >
            <img class="" style="width:100%;height:100%;" src="{% static item.Path %}"/>
        </div>
    </div>
    {% endif %}


    <div id="{{ item.mguid  }}" class="itemyellow" ></div>
    {% endfor %}
</form>







<!-- 补充下空档 -->
<div style="height:120px;"></div>

<!--<div  class="underdiv" style="background-color:red;">-->
<div class="underdiv" style="background-color:rgb(107,96,96);background-repeat:no-repeat;background-size:350px 20px;background-position:-20px 0;background-image:url('{% static 'img/tlog_add_bottom.jpg' %}')">

    <!-- 右下角的按钮 -->
    <div onclick="turntolog();" style="margin-right:25px;border:0px solid red;float:right;width:25px;height:20px;">  </div>
</div>
</div>
</body>
</html>


